<template>
  <el-dialog
    v-model="dialogVisibled"
    :title="dialogTitle"
    width="600"
    :draggable="true"
    :before-close="handleClose"
    @open="handleDialogOpen"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="modelData"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="按钮名称" prop="ButtonName">
        <el-input v-model="modelData.ButtonName" maxlength="10" />
      </el-form-item>
      <el-form-item label="按钮事件" prop="ButtonKey">
        <el-input
          v-model="modelData.ButtonKey"
          maxlength="20"
          :disabled="modelData.ButtonId === '' ? false : true"
        />
      </el-form-item>

      <el-form-item label="按钮样式" prop="ButtonStyleId">
        <el-select
          @change="buttonStyleClick"
          v-model="modelData.ButtonStyleId"
          placeholder="请选择样式"
        >
          <el-option
            v-for="item in buttonStyleList"
            :key="item.buttonStyleId"
            :label="item.buttonStyleName"
            :value="item.buttonStyleId"
            :disabled="item.isDisabled"
          >
            <buttonStyleLayout :modelData="item"></buttonStyleLayout>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="按钮预览">
        <buttonStyleLayout
          :modelData="defaultButtonStyle"
          :buttonName="modelData.ButtonName"
        ></buttonStyleLayout>
      </el-form-item>
      <el-form-item label="所属公司" prop="CorporationKey">
        <el-select
          @change="corporationClick"
          v-model="modelData.CorporationKey"
          :disabled="modelData.ButtonId === '' ? false : true"
          placeholder="请选择公司"
        >
          <el-option
            v-for="item in corporationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属系统" prop="SystemKey">
        <el-select
          @change="systemClick"
          v-model="modelData.SystemKey"
          :disabled="modelData.ButtonId === '' ? false : true"
          placeholder="请选择系统"
        >
          <el-option
            v-for="item in systemList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属菜单" prop="MenuId">
        <el-tree-select
          @change="menuClick"
          placeholder="请选择菜单"
          v-model="modelData.MenuId"
          :default-expanded-keys="defaultExpandedKeys"
          :data="menuList"
          :disabled="modelData.ButtonId === '' ? false : true"
          check-strictly
          :render-after-expand="false"
          :props="defaultProps"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item label="按钮类型" prop="ButtonRoleType">
        <el-radio-group v-model="modelData.ButtonRoleType"  :disabled="modelData.ButtonId === '' ? false : true">
          <el-radio :value="1" size="large">菜单按钮</el-radio>
          <el-radio :value="2" size="large">数据按钮</el-radio>
        </el-radio-group>
        <el-text
          @click="helperClick"
          class="mx-1"
          type="warning"
          style="margin-left: 10px; cursor: pointer"
          ><el-icon><QuestionFilled /></el-icon>什么是按钮类型</el-text
        >
      </el-form-item>
      <el-form-item
        label="按钮规则"
        v-if="ButtonRoleTypeEnum.RowButton === modelData.ButtonRoleType"
      >
        <el-select
          v-model="modelData.RuleId"
          placeholder="请选择按钮规则"
          style="width: 76%"
        >
          <el-option
            v-for="item in dataRuleList"
            :key="item.ruleId"
            :label="item.ruleName"
            :value="item.ruleId"
          />
        </el-select>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="在【数据权限】菜单中新增规则"
          placement="top-start"
        >
          <el-text
            class="mx-1"
            type="success"
            style="cursor: pointer; margin-left: 10px"
            >如何新增规则?</el-text
          >
          >
        </el-tooltip>

        <el-text class="mx-1" type="warning"
          ><el-icon><WarningFilled /></el-icon
          >设置规则的按钮，需要满足规则才能操作，否则将不可点击</el-text
        >
      </el-form-item>
      <div style="justify-content: right; align-items: right; display: flex">
        <el-button type="success" icon="Check" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <!-- <el-button
          type="warning"
          icon="RefreshRight"
          @click="resetForm(ruleFormRef)"
          >重置</el-button
        > -->
        <el-button type="danger" icon="Close" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
    <script  lang="ts">
import {
  ref,
  reactive,
  onMounted,
  defineComponent,
  PropType,
  computed,
} from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { selectOutPut } from "@/model/public/selectModel";
import { getAllCorporationSelect } from "@/api/corporation";
import { getAllSystemSelect } from "@/api/system";
import { treeOutPut } from "@/model/public/treeModel";
import { SysButton } from "@/model/button/button";
import { insert, update } from "@/api/button";
import { getCorporationSystemMenuList } from "@/api/menu";
import { getButtonStyleList } from "@/api/buttonStyle";
import { SysButtonStyleOutPut } from "@/model/buttonStyle/buttonStyle";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import { getMenuDataRuleList } from "@/api/dataRule";
import { SysDataRuleOutPut } from "@/model/dataRule";
import { ButtonRoleTypeEnum, RuleTypeEnum } from "@/enum/public";
import { helperFileMethod } from "@/api/publicTool";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysButton>,
      required: true,
    },
  },

  setup(props, context) {
    //公司数据
    const corporationList = ref<selectOutPut[]>([]);
    //系统数据
    const systemList = ref<selectOutPut[]>([]);
    //按钮样式数据
    const buttonStyleList = ref<SysButtonStyleOutPut[]>([]);
    //默认按钮样式
    const defaultButtonStyle = ref<SysButtonStyleOutPut>();
    //菜单数据
    const menuList = ref<treeOutPut[]>([]);
    //公司key
    const corporationKey = ref<string>("");
    //系统key
    const systemKey = ref<string>("");
    //菜单key
    const menuId = ref<string>("");
    //默认展开
    const defaultExpandedKeys = ref<string[]>([]);
    //数据规则数据
    const dataRuleList = ref<SysDataRuleOutPut[]>([]);

    //初始加载dom
    onMounted(() => {
      getCorporation();
      getButtonSelectMsg();
      //getSystemSelectMsg();
      //getRoleTreeMsg();
    });

    //打开时加载
    const handleDialogOpen = function () {
      corporationKey.value = props.modelData.CorporationKey;
      systemKey.value = props.modelData.SystemKey;
      menuId.value = props.modelData.MenuId;
      systemClick(props.modelData.SystemKey);
      getSystemSelectMsg(props.modelData.CorporationKey);
      getDefaultButtonStyle(props.modelData.ButtonStyleId);
      if (menuId.value !== "") {
        GetMenuDataRuleListMsg(menuId.value);
      }
    };

    //tree指定操作
    const defaultProps = {
      children: "children",
      label: "label",
      //设置属于下级角色的菜单，不能勾选
      disabled(data: treeOutPut) {
        if (data.children.length>0) {
          return true;
        }
      },
    };

    //获取按钮默认样式
    const getDefaultButtonStyle = function (buttonStyleId: string) {
      defaultButtonStyle.value = buttonStyleList.value.find(
        (f) => f.buttonStyleId === buttonStyleId
      );
    };

    //获取按钮样式数据
    const getButtonSelectMsg = function () {
      getButtonStyleList().then(({ data, code, msg }) => {
        if (code == 200) {
          buttonStyleList.value = data;
        }
      });
    };

    //获取下拉框中的公司数据
    const getCorporation = function () {
      getAllCorporationSelect().then(({ data, code, msg }) => {
        if (code == 200) {
          corporationList.value = data;
        }
      });
    };

    //获取下拉框中的系统数据
    const getSystemSelectMsg = function (corporationKey: string) {
      getAllSystemSelect({ corporationKey: corporationKey }).then(
        ({ data, code, msg }) => {
          if (code == 200) {
            systemList.value = data;
          }
        }
      );
    };

    //获取菜单数据规则数据
    const GetMenuDataRuleListMsg = function (menuId: string) {
      getMenuDataRuleList({
        menuId: menuId,
        ruleType: RuleTypeEnum.DataButtonRule,
      }).then(({ data, code }) => {
        if (code == 200) {
          dataRuleList.value = data;
        }
      });
    };

    //公司点击事件
    const corporationClick = function (value: string) {
      if (value == corporationKey.value) {
        props.modelData.SystemKey = systemKey.value;
        props.modelData.MenuId = menuId.value;
        systemClick(systemKey.value);
      } else {
        props.modelData.SystemKey = "";
        props.modelData.MenuId = "";
      }
      menuList.value = [];
      corporationKey.value = value;
      getSystemSelectMsg(value);
    };

    //系统点击事件
    const systemClick = function (value: string) {
      menuList.value = [];
      props.modelData.MenuId = "";
      if (value == systemKey.value) props.modelData.MenuId = menuId.value;
      else props.modelData.MenuId = "";
      if (value != "")
        getCorporationSystemMenuListMsg(corporationKey.value, value);
    };

    //菜单点击事件
    const menuClick = function (value: string) {
      GetMenuDataRuleListMsg(value);
    };

    //获取菜单数据
    const getCorporationSystemMenuListMsg = function (
      corporationKey: string,
      systemKey: string
    ) {
      getCorporationSystemMenuList({
        corporationKey: corporationKey,
        systemKey: systemKey,
      }).then(({ data, code, msg }) => {
        if (code == 200) {
          menuList.value = data;
          if (data.length > 0) defaultExpandedKeys.value.push(data[0].key);
        }
      });
    };

    //按钮样式选择事件
    const buttonStyleClick = function (value: string) {
      getDefaultButtonStyle(value);
    };

    //验证规则
    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules<typeof props.modelData>>({
      ButtonName: [
        {
          required: true,
          message: "请填写按钮名称!",
          trigger: "blur",
        },
      ],
      ButtonKey: [
        {
          required: true,
          message: "请填写按钮事件!",
          trigger: "blur",
        },
      ],
      SystemKey: [
        {
          required: true,
          message: "请填选择所属系统!",
          trigger: "blur",
        },
      ],
      MenuId: [
        {
          required: true,
          message: "请填选择所属菜单!",
          trigger: "blur",
        },
      ],
      CorporationKey: [
        {
          required: true,
          message: "请选择所属公司!",
          trigger: "blur",
        },
      ],
      ButtonStyleId: [
        {
          required: true,
          message: "请选择按钮样式!",
          trigger: "blur",
        },
      ],
    });

    //提交
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          if (props.modelData.ButtonId === "") {
            insert(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          } else {
            update(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                handleClose();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          }
        }
      });
    };

    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
      resetForm(ruleFormRef.value);
      if (corporationKey.value != "" && systemKey.value != "")
        getCorporationSystemMenuListMsg(corporationKey.value, systemKey.value);
      //  done();
    };

    //帮助事件
    const helperClick = function () {
      helperFileMethod("pages/39e27e/");
    };
    return {
      handleClose,
      dialogVisibled,
      ruleFormRef,
      submitForm,
      rules,
      resetForm,
      corporationList,
      systemList,
      menuList,
      corporationClick,
      systemClick,
      corporationKey,
      systemKey,
      handleDialogOpen,
      buttonStyleList,
      defaultButtonStyle,
      buttonStyleClick,
      defaultProps,
      defaultExpandedKeys,
      dataRuleList,
      menuClick,
      ButtonRoleTypeEnum,
      RuleTypeEnum,
      helperClick,
    };
  },
  components: { buttonStyleLayout },
});
</script>
    
    <style>
</style>